import { Box, Link, Text, Flex, VStack, HStack, Divider, Icon, useColorModeValue } from '@chakra-ui/react';
import { ExternalLinkIcon } from '@chakra-ui/icons';
import { FaGithub, FaWeixin, FaPhone, FaEnvelope, FaMapMarkerAlt, FaShieldAlt, FaUserShield, FaCertificate } from 'react-icons/fa';

const links = {
  github: 'https://github.com/your-org/verifiable-credentials',
  docs: 'https://docs.your-domain.com',
  privacy: '/privacy',
  terms: '/terms',
  contact: '/contact',
};

const Footer = () => {
  const borderColor = useColorModeValue('gray.200', 'gray.700');
  const bgColor = useColorModeValue('gray.50', 'gray.900');
  const textColor = useColorModeValue('gray.600', 'gray.400');

  return (
    <Box as="footer" bg={bgColor} borderTop="1px" borderColor={borderColor} py={8}>
      <Flex
        direction={{ base: 'column', md: 'row' }}
        maxW="7xl"
        mx="auto"
        px={8}
        gap={8}
        justify="space-between"
      >
        {/* 公司信息 */}
        <VStack align="start" spacing={3} flex={1}>
          <HStack>
            <Icon as={FaShieldAlt} boxSize={6} color="blue.500" />
            <Text fontSize="xl" fontWeight="bold">可信资源交互系统</Text>
          </HStack>
          <Text color={textColor} fontSize="sm">
            基于区块链的可信身份认证解决方案
          </Text>
          <HStack spacing={4} color={textColor}>
            <Link href={links.github} isExternal>
              <Icon as={FaGithub} boxSize={5} />
            </Link>
            <Link href="#" isExternal>
              <Icon as={FaWeixin} boxSize={5} />
            </Link>
          </HStack>
        </VStack>

        {/* 联系方式 */}
        <VStack align="start" spacing={3} flex={1}>
          <Text fontWeight="bold" mb={2}>联系我们</Text>
          <HStack color={textColor}>
            <Icon as={FaPhone} />
            <Text fontSize="sm">888-888-8888</Text>
          </HStack>
          <HStack color={textColor}>
            <Icon as={FaEnvelope} />
            <Text fontSize="sm">support@credentials.com</Text>
          </HStack>
          <HStack color={textColor}>
            <Icon as={FaMapMarkerAlt} />
            <Text fontSize="sm">重庆XXXXXXXX</Text>
          </HStack>
        </VStack>

        {/* 快速链接 */}
        <VStack align="start" spacing={3} flex={1}>
          <Text fontWeight="bold" mb={2}>快速链接</Text>
          <Link href="/about" color={textColor} fontSize="sm">
            关于我们
          </Link>
          <Link href={links.docs} isExternal color={textColor} fontSize="sm">
            开发文档 <ExternalLinkIcon mx="2px" />
          </Link>
          <Link href="/partners" color={textColor} fontSize="sm">
            合作伙伴
          </Link>
        </VStack>

        {/* 认证服务 */}
        <VStack align="start" spacing={3} flex={1}>
          <Text fontWeight="bold" mb={2}>认证服务</Text>
          <HStack color={textColor}>
            <Icon as={FaUserShield} />
            <Text fontSize="sm">身份认证</Text>
          </HStack>
          <HStack color={textColor}>
            <Icon as={FaCertificate} />
            <Text fontSize="sm">证书验证</Text>
          </HStack>
          <HStack color={textColor}>
            <Icon as={FaShieldAlt} />
            <Text fontSize="sm">隐私保护</Text>
          </HStack>
        </VStack>
      </Flex>

      {/* 底部信息 */}
      <Box maxW="7xl" mx="auto" px={8} mt={8}>
        <Divider mb={4} />
        <Flex
          direction={{ base: 'column', sm: 'row' }}
          justify="space-between"
          align="center"
          color={textColor}
          fontSize="sm"
          gap={2}
        >
          <Text>© {new Date().getFullYear()} 基于可验证凭证的可信资源交互系统. 保留所有权利</Text>
          <HStack spacing={4}>
            <Link href={links.privacy}>隐私政策</Link>
            <Link href={links.terms}>服务条款</Link>
            <Link href={links.contact}>联系我们</Link>
          </HStack>
        </Flex>
      </Box>
    </Box>
  );
};

export default Footer;
